<template>
    <up-popup class="searchPopup" :bgColor="'#7099B4'" :show="show" :round="10" @close="close" @open="openCallback">
      <view class="content" :style="adaptiveStyle">
        <up-gap height="5" bgColor="#ffffff00"></up-gap>
          <up-input
            placeholder="搜尋大廈、設施、地址等"
            prefixIcon="search"
            :adjust-position="false"
            prefixIconStyle="font-size: 22px;color: #909399"
            customStyle="color: #fff;background-color: #fff;"
            :border="'surround'"
            shape="circle"
            :focus="true"
            :clearable="true"
            v-model="searchValue"
            @change="searchChange"
          ></up-input>
        <up-gap height="10" bgColor="#ffffff00"></up-gap>
        <template v-if="searchValue.length==0">
          <up-cell-group :border="false">
            <up-cell :border="false" name="hk1980" @click="onClick" :titleStyle="{color:'#fff'}" icon="setting-fill" title="香港1980方格網坐標">
              <template #icon>
                <up-icon size="35" :name="hk1980"></up-icon>
              </template>
            </up-cell>
            <up-cell :border="false" name="lotgla" @click="onClick" :titleStyle="{color:'#fff'}" icon="setting-fill" title="地段及政府撥地">
              <template #icon>
                <up-icon size="35" :name="j8Ico"></up-icon>
              </template>
            </up-cell>
            <up-cell :border="false" name="geodetic" @click="onClick" :titleStyle="{color:'#fff'}" icon="setting-fill" title="大地測量站">
              <template #icon>
                <up-icon size="35" :name="geodetic"></up-icon>
              </template>
            </up-cell>
          </up-cell-group>
        </template>
        <template v-else>
            <scroll-view :scroll-y="true" class="scroll-Y" >

            <view
              class="item"
              v-for="(res, index) in searchList"
              :key="index"
              @click="onsClick(res)"
            >
              <view class="bottom">
                <up-icon :name="searchPng" size="20" color="#fff"></up-icon><view style="flex:1;padding-left:10rpx;">{{ res }}</view>
              </view>
            </view>

            </scroll-view>
        </template>
        <up-gap height="20" bgColor="#ffffff00"></up-gap>
      </view>
  </up-popup>
</template>

<script setup  lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import j8Ico from '@/static/icon/J8.png'
import hk1980 from '@/static/icon/hk1980.png'
import searchPng from '@/static/images/search1.png'
import geodetic from '@/static/icon/geodetic.png'
import { HKMAPautocomplete } from '@/api/system/map'
import { useKeyboard } from '@/utils/useKeyboard'

// 创建响应式数据
const show = ref(false)
const searchValue = ref('')
const searchList: any = ref([])

// 使用全局键盘状态管理
const { keyboardHeight, isKeyboardVisible, adaptiveStyle } = useKeyboard({
  autoStart: false,
  autoStop: false,
  styleConfig: {
    type: 'margin',
    direction: 'bottom'
  },
  onChange: (state) => {
    // console.log('Search page keyboard state changed:', state)
  }
})

const emit = defineEmits<{
  (e: 'click', data: any): void
  (e: 'sClick', data: any): void
}>()

// 定义方法

function open() {
  show.value = true
}

function openCallback() {
}

function close() {
  show.value = false
}

function onClick(data: any) {
  emit('click', data)
}


function onsClick(data: any) {
  emit('sClick', data)
}

const searchChange = (keyword: any) => {
  if(keyword.length>1){
    HKMAPautocomplete(keyword).then((data:any) => {
      searchList.value = data
    }).catch(error => {
      searchList.value = [];
      console.error("获取数据失败:", error);
    })
  }else{
    searchList.value = []
  }
}

defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.searchPopup .content {
    padding: 20rpx;
    background-color: #7099B4;
    border-radius: 10rpx 10rpx 0px 0px;
    height: 40vh;
  }
.item {
  padding: 20rpx 20rpx;
  border-bottom: 1px solid #d9d4d4;
  .bottom {
    display: flex;
    font-size: 28rpx;
    justify-content: space-between;
    color: #fff;
  }
}
</style>

